<template>
	<view class="x-wrapper">
		<view class="x-main-content">
			<view class="hosp-box">
				<u-navbar title="名医推荐" :fixed="true" leftIcon=" " placeholder>
				</u-navbar>
				<view style="position: fixed; width: 100%;z-index: 99">
					<search @toSearch="toSearch"></search>
					<view class="navs-box">
						<u-tabs :list="showTabs" keyName="label" lineColor="transparent" lineHeight="6rpx"
							:inactiveStyle="searchInactiveStyle" :activeStyle="searchActiveStyle" :current="current"
							@click="tabsClick" style="justify-content: center">
						</u-tabs>
					</view>
				</view>
				<view class="list-box" style="margin-top: 200rpx;" v-if="showFlag">
					<template v-if="showListDoctor && showListDoctor.length">
						<doctor-item v-for="(item, index) in showListDoctor" :key="item.id" :item="item"
							@click.native="goDoctorDetail(item)"></doctor-item>
					</template>
					<view class="x-no-data" v-if="doctorList.length === 0 && isPageShow">
						<u-empty text="暂无数据" mode="data" marginTop="100"></u-empty>
					</view>
				</view>
			</view>
			<van-popup :show="flag" @close="isClose" position="bottom" round>
				<van-picker :columns="showPickerList" show-toolbar :title="pickerTitle" @cancel="onCancel"
					@confirm="onConfirm" />
			</van-popup>
		</view>
		<u-back-top :scroll-top="scrollTop" icon="http://www.peiyiyiliao.com/QRCodeShare/imgs/ic_top.png"
			:iconStyle="iconStyle" bottom="280rpx"></u-back-top>
		<tabBar :selectedIndex="selectedTabIndex"></tabBar>
	</view>
</template>

<script>
	import doctorItem from "@/components/doctor/index";
	import search from "@/components/search.vue";
	import doctorCard from "../../pages/business/components/doctorCard.vue"
	export default {
		components: {
			doctorCard,
			doctorItem,
			search,
		},
		data() {
			return {
				params: {
					cityCode: "",
					name: "",
					pageNum: 1,
					pageSize: 20,
				},
				flag: false,
				showFlag: false,
				current: 0,
				scrollTop: 0,
				tabs: [{
						label: "推荐",
						value: 0,
					},
					{
						label: "请选择医院",
						value: 1,
					},
					{
						label: "选择一级科室",
						value: 2,
					},
					{
						label: "选择二级科室",
						value: 3,
					},
				],
				doctorList: [],
				showListDoctor: [],
				hospitalList: [],
				iconStyle: {
					width: '36px',
					height: '36px'
				},
				showTabs: [],
				showPickerList: [],
				pickerTitle: '',
				selectIndex: '',
				hospNameList: [],
				listDoc: [],
				startCode: 0,
				endCode: 5,
				currentHospCode: '',
				currentDepI: [],
				currentDepICode: '',
				currentDepII: [],
				currentDepIICode: '',
				recommendDoc: [],
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			this.$nextTick(() => {
				this.showTabs = this.tabs
			})

			let city = uni.getStorageSync('myAddress')
			uni.showLoading({
				title: '加载中',
				mask: true,
			})
			setTimeout(() => {
				uni.hideLoading()
				if (city) {
					this.showFlag = true
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未选择城市,是否前去选择?',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/business/chooseItem?code=' + 'city'
								})
							} else if (res.cancel) {
								uni.switchTab({
									url: '/pages/business/home',
								})
							}
						}
					})
				}
			}, 500)
			this.getHospitalList()
		},
		computed: {
			selectedTabIndex() {
				return uni.getStorageSync('userWindow') === '001' ? 1 : null
			}
		},

		onHide() {
			this.showListDoctor = []
			this.showFlag = false
			this.doctorList = []
			this.tabs = [{
					label: "推荐",
					value: 0,
				},
				{
					label: "请选择医院",
					value: 1,
				},
				{
					label: "选择一级科室",
					value: 2,
				},
				{
					label: "选择二级科室",
					value: 3,
				},
			]

			this.current = 0
		},
		created() {},
		//滚动底部加载更多数据
		onReachBottom() {
			this.onShowMore()
		},
		onPullDownRefresh() {
			this.showFlag = false
			this.getHospitalList()
			setTimeout(function() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				uni.stopPullDownRefresh();
			}, 1000);
			uni.hideLoading()
			this.showFlag = true
		},
		methods: {
			tabsClick(e) {
				this.flag = true
				this.current = e.value
				console.log(this.current)
				if (e.value == 0) {
					this.flag = false
					this.showTabs[1].label = '请选择医院'
					this.showTabs[2].label = '选择一级科室'
					this.showTabs[3].label = '选择二级科室'
					this.doctorList = this.recommendDoc
					this.showListDoctor = this.doctorList.slice(0, 5)
				} else if (e.value == 1) {
					this.selectIndex = 1
					this.pickerTitle = '选择医院'
					this.showTabs[2].label = '选择一级科室'
					this.showTabs[3].label = '选择二级科室'
					this.showPickerList = this.hospNameList
				} else if (e.value == 2) {
					if (this.showTabs[1].label == '请选择医院') {
						this.flag = false
						uni.showModal({
							title: '提示',
							content: '您还未选择医院'
						})
					} else {
						this.showTabs[3].label = '选择二级科室'
						this.changeTabsToDepI()
						this.selectIndex = 2
						this.pickerTitle = '选择一级科室'
					}
				} else if (e.value == 3) {
					if (this.showTabs[1].label == '请选择医院') {
						this.flag = false
						uni.showModal({
							title: '提示',
							content: '您还未选择医院'
						})
					} else if (this.showTabs[2].label == '选择一级科室') {
						this.flag = false
						uni.showModal({
							title: '提示',
							content: '请先选择一级科室'
						})
					} else {
						this.selectIndex = 3
						this.pickerTitle = '选择二级科室'
						this.changeTabsToDepII()
					}
				}
			},
			isClose() {
				this.flag = false
			},
			goDoctorDetail(item) {
				uni.navigateTo({
					url: '/pages/doctor/doctor-detail?data=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			toSearch(ctx) {
				this.showListDoctor = this.showListDoctor.filter(i => {
					return i.doctorName.includes(ctx)
				})
			},
			onCancel() {
				this.isClose()
			},
			async onConfirm(e) {
				const index = this.tabs.findIndex(i => {
					return i.value == this.selectIndex
				})
				this.showTabs[index].label = e.detail.value

				if (this.selectIndex == 1) {
					this.currentHospCode = e.detail.search
					//选择完医院后显示的医生列表
					let data = {
						hospitalId: this.hospitalList[this.currentHospCode].id,
					}
					let res = await this.$request('/api/index/getAllHospitalDoctorList/', data, 'GET')
					this.doctorList = res.data.rows
					this.showListDoctor = this.doctorList.slice(0, 5)

				} else if (this.selectIndex == 2) {
					this.currentDepICode = e.detail.search
					let data = {
						hospitalId: this.hospitalList[this.currentHospCode].id,
						parentId: this.currentDepI[this.currentDepICode].parentId
					}
					let res = await this.$request('/api/index/getAllHospitalDoctorList/', data, 'GET')
					this.doctorList = res.data.rows
					this.showListDoctor = this.doctorList.slice(0, 5)
				} else if (this.selectIndex == 3) {
					this.currentDepIICode = e.detail.search
					let data = {
						hospitalId: this.hospitalList[this.currentHospCode].id,
						parentId: this.currentDepI[this.currentDepICode].parentId,
						departmentId: this.currentDepII[this.currentDepIICode].id,
					}
					let res = await this.$request('/api/index/getAllHospitalDoctorList/', data, 'GET')
					this.doctorList = res.data.rows
					this.showListDoctor = this.doctorList.slice(0, 5)
				}
				this.isClose()
			},
			async getHospitalList() {
				const cityCode = uni.getStorageSync('myAddress').cityId
				const data = {
					cityCode
				}
				if (cityCode) {
					let res = await this.$request('/api/index/getAllHospitalList', data, 'GET')
					this.hospitalList = res.data.rows
					let showNumber = Math.floor(Math.random() * this.hospitalList.length)
					let ret = await this.$request('/api/index/getFirstDepartmentList/' + this.hospitalList[
							showNumber]
						.id)
					if (ret.data.data.length) {
						let showDep = ret.data.data
						let code = Math.floor(Math.random() * showDep.length)
						let dataSec = {
							hospitalId: this.hospitalList[showNumber].id,
							parentId: showDep[code].parentId
						}
						let rep = await this.$request('/api/index/getSecondDepartmentList/', dataSec, 'GET')
						if (rep.data.data.length) {
							let depList = rep.data.data
							dataSec.departmenId = depList[0].id
							let req = await this.$request('/api/index/getAllHospitalDoctorList/', dataSec, 'GET')
							this.recommendDoc = req.data.rows
							this.doctorList = this.recommendDoc
							let temp = this.recommendDoc.slice(0, 5)
							for (let i = 0; i < temp.length; i++) {
								this.showListDoctor.push(temp[i])
							}
						}
					}
					let arr = []
					res.data.rows.forEach(i => {
						arr.push(i.name)
					})
					this.hospNameList = arr
				}
			},
			onShowMore() {
				if (this.endCode <= this.doctorList.length) {
					this.startCode += 5
					this.endCode += 5
					let temp = this.doctorList.slice(this.startCode, this.endCode)
					for (let i = 0; i < temp.length; i++) {
						this.showListDoctor.push(temp[i])
					}
				} else {
					return
				}
			},
			async changeTabsToDepI() {
				//一级科室选择框
				let hospCode = this.hospitalList[this.currentHospCode].id
				let res = await this.$request('/api/index/getFirstDepartmentList/' + hospCode)
				this.currentDepI = res.data.data
				let arr = []
				res.data.data.forEach(i => {
					arr.push(i.dictLabel)
				})
				this.showPickerList = arr

			},
			async changeTabsToDepII() {
				let depICode = this.currentDepI[this.currentDepICode].parentId
				let data = {
					hospitalId: this.hospitalList[this.currentHospCode].id,
					parentId: depICode
				}
				let res = await this.$request('/api/index/getSecondDepartmentList/', data, 'GET')
				this.currentDepII = res.data.data
				let arr = []
				res.data.data.forEach(i => {
					arr.push(i.departmentName)
				})
				this.showPickerList = arr
			},
			onClickBack() {
				uni.switchTab({
					url: '/pages/business/home'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	u-search {
		width: 100%;
	}

	.list-box {
		padding: 30rpx 40rpx;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.hosp-item {
			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.navs-box {
		padding: 10rpx;
		background: #fff;

		.more-info {
			position: fixed;
			background: rgba(0, 0, 0, 0.3);
			width: 100%;
			height: 100vh;
			left: 0;

			.more-info-tags {
				position: absolute;
				background: #fff;
				padding: 20rpx;
				top: 0;
				width: 660rpx;
				left: 25rpx;
				border-bottom-left-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				color: #6f7da1;

				.hospital-name {
					padding: 10rpx;
				}

				.hospital-name:nth-child(2n + 1) {
					background-color: #f9faff;
				}
			}
		}
	}
</style>